<template>
	<view class="content">
		<my-top :topName="topName" :userName="userName" :type="topType" :buildingNo="buildingNo"></my-top>
		<view class="indexContent">
			<head-title :titleHead="titleHead" @maintenanceFun="maintenanceFun()"></head-title>
			<view class="schoolTitle">
				<view>
					<view class="uni-list">
						<view class="uni-list-cell" style="display: flex;justify-content: space-around;">
							<view class="uni-list-cell-left" style="font-size: 36rpx;">
								班级 :
							</view>
							<!-- <view class="uni-list-cell-db" @click="classFun()"> -->
							<!-- <picker @change="bindPickerChange($event,classArr)" class="titleInput" :value="index"
									:range="classArr">
									<view class="uni-input" style="padding-left:6rpx">{{classArr[index]}}</view>
								</picker> -->
							<!-- <picker @change="bindPickerChange($event,classArr)"  class="titleInput" :value="index" :range="classArr"> -->
							<!-- <input class="uni-input titleInput" v-model="className" style="padding:0 20rpx" @input="classInput()"></input> -->
							<!-- </picker> -->
							<!-- </view> -->
							<view class="uni-list-cell-db">
								<view class="titleInput" style="color:#0000FE"><input placeholder="请输入班级"
										v-model="classNameNew" @input="showClassName" style=" font-size: 28rpx;" />
								</view>
							</view>

							<uni-popup ref="popup" type="bottom">
								<view class="Popup">
									<view
										style="display: flex;justify-content: center;align-items: center; border-bottom: 0.1px solid #e9e9e9;margin: 10rpx;padding: 10rpx;">
										请选择班级</view>

									<view @click="bindPickerChange(item)" v-for="item in arrNew"
										style="display: flex;justify-content: center;align-items: center; border-bottom: 0.1px solid #e9e9e9;margin: 10rpx;padding: 10rpx;">
										{{item.className}}
									</view>
								</view>
							</uni-popup>

							<view class="uni-list-cell-left" style="font-size: 36rpx;margin-left:30rpx;">
								宿舍:
							</view>
							<view class="uni-list-cell-db">
								<input class="uni-input titleInput" v-model="dorName" style="padding:0 20rpx"
									@input="dorInput()"></input>
							</view>
						</view>
					</view>
				</view>
				<view class="dorList" v-if="dorIsShow">
					<view class="dorItem" v-for="(item,index) in dorList" :key="index" @click="dorClick(item)">
						{{item.dorName}}
					</view>
				</view>
			</view>
			<view class="repDevice" style="margin-top:50rpx ;">报修说明</view>
			<view class="repCheckout">
				<checkbox-group v-for="(item,index) in repArr" :key="index">
					<label @click="checkFun(item)">
						<checkbox :checked="item.state" class="leaveCheck" value="yes">{{item.deviceName}}</checkbox>
					</label>
				</checkbox-group>
			</view>
			<textarea class="repText" v-model="repairDesc" placeholder="备注信息"></textarea>
			<view class="repDevice" style="margin-top:50upx;">拍照</view>
			<view>
				<view class="repDevice" style="position: relative;top:180rpx;left:230rpx">上传照片</view>
				<image @click="chooseImage" :src="imgShow" class="imgSty" mode=""></image>
			</view>

			<view class="logoSty"></view>
		</view>
		<!-- <my-bottom :topName="topName" :bottomArr="roleName!='部门经理'?attendanceTecArr:attendanceArr"></my-bottom> -->

		<!-- <bottom-com :topName="topName" :bottomArr="roleName!='部门经理'?attendanceTecArr:attendanceArr"></bottom-com>		 -->
	</view>
</template>

<script>
	import topCom from '@/pages/component/topCom.vue'
	import bottomCom from '@/pages/component/bottom.vue'
	import headTitle from '@/pages/component/btnHeadeCom.vue'
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/index.js'
	import * as imageConversion from 'image-conversion'
	export default {
		name: 'repStatus',
		data() {
			return {
				file: {},
				dorList: [],
				className: '',
				dorName: '',
				classArr: [],
				index: '',
				roleName: '',
				topName: '报修登记',
				userName: '',
				titleHead: '报修信息',
				imgShow: '',
				repArr: ["门窗", "空调", "桌椅", "插座", "灯管", "投影仪"],
				deviceIds: [],
				photo: '',
				repairBy: '',
				repairDesc: '',
				attendanceArr: [{
						name: 'home',
						icon: 'iconfont icon-baoxiu',
						text: "报修",
						path: '/pages_main/dutyCheckWorkAttendance/dutyIndex/dutyIndex'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-bi',
						text: "统计",
						path: '/pages_main/dutyCheckWorkAttendance/dutyIndex/dutyIndex'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "设置",
						path: '/pages_main/dutyCheckWorkAttendance/dutyIndex/dutyIndex'
					}
				],
				attendanceTecArr: [{
						name: 'home',
						icon: 'iconfont icon-baoxiu',
						text: "报修",
						path: '/pages_main/dutyCheckWorkAttendance/dutyTecIndex'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-bi',
						text: "统计",
						path: '/pages_main/dutyCheckWorkAttendance/dutyTecIndex'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "设置",
						path: '/pages_main/dutyCheckWorkAttendance/dutyTecIndex'
					}
				],
				buildingNo: null,
				topType: '',
				classId: 1,
				classDeptId: '',
				dormitoryId: 0.,
				dormitoryNo: 1,
				dorIsShow: false,
				isDuty: 0,
			}
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					that.roleName = res.data
				}
			})
			uni.getStorage({
				key: 'loginName',
				success: (res) => {
					that.userName = res.data
				}
			})
			// repairBy
			uni.getStorage({
				key: 'loginName',
				success: (res) => {
					that.repairBy = res.data
				}
			})
			uni.getStorage({
				key: 'isDuty',
				success(res) {
					that.isDuty = res.data
				}
			})
		},
		onLoad(options) {
			this.buildingNo = options.buildingNo ? options.buildingNo : null
			// this.classId = options.classId
			this.topType = options.type
			// this.topName = options.className || options.dormitoryNo
			this.classDeptId - options.classDeptId
			// this.dormitoryId = options.dormitoryId
			this.dormitoryNo = options.dormitoryNo
		},
		mounted() {
			this.getAppClassDevice()
			this.getAllClass()
		},

		methods: {
			classFun() {
				this.getAllClass()
			},
			dorClick(item) {
				this.dorName = item.dorName
				this.dorIsShow = false
				this.dormitoryId = item.bdormitoryId
				this.classId = null
			},
			dorInput() {
				this.classNameNew = ''
				this.classId = null
				this.classArr = []
				this.$api.duty.getDormitoryNameByName(this.dorName).then(res => {
					this.dorList = res.data
					this.dorList.forEach((item) => {
						item.dorName = item.buildingName + item.dormitoryNo
						console.log(item.dorName)
					})
				})

				if (this.dorName == '') {
					this.dorIsShow = false
				} else {
					this.dorIsShow = true
				}
				this.getAppDevice()
			},
			classInput() {
				this.dorName = ''
				this.dormitoryId = ''
				this.getAppClassDevice()
				this.classId = this.dataList[this.index].classId
				this.$forceUpdate()
			},
			bindPickerChangeName(e, item) {
				this.index1 = e.target.value
				console.log(this.index1, "index")
				this.stuNo = this.studentList[this.index1].studentNo
			},

			bindPickerChange(item) {
				// alert(this)
				this.dorName = ''
				this.dormitoryId = ''
				this.getAppClassDevice();
				this.classNameNew = item.className;
				this.classId = item.classId;
				this.$refs.popup.close();
				this.$forceUpdate()
				// this.index = e.target.value
				// this.classInput()

				// // this.getClassStuListByClassId(this.dataList[this.index].classId)
				// this.$forceUpdate()
			},
			getAllClass() {
				this.$api.instructor.getAllAppClassList().then(res => {
					this.dataList = res.data
					this.classArr = []
					this.dataList.forEach((item, index) => {
						this.classArr.push(item.className)
					})
					this.classList = res.data
					// this.getClassStuListByClassId(this.dataList[this.index].classId)
					this.$forceUpdate()
				})
			},
			// base64转换成二进制
			convertBase64UrlToBlob(base64) {
				let urlData = base64.dataURL
				let type = base64.type
				let bytes = null
				if (urlData.split(',').length > 1) { //是否带前缀
					bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte
				} else {
					bytes = window.atob(urlData)
				}
				// 处理异常,将ascii码小于0的转换为大于0
				let ab = new ArrayBuffer(bytes.length)
				let ia = new Uint8Array(ab)
				for (let i = 0; i < bytes.length; i++) {
					ia[i] = bytes.charCodeAt(i)
				}
				return new Blob([ab], {
					type: type
				})
			},
			checkFun(item) {
				item.state = !item.state
				console.log(this.repArr)
			},

			// 获取图片信息
			getImageInfo(src) {
				let _this = this
				uni.getImageInfo({
					src,
					success(res) {
						console.log('压缩前', res)
						let canvasWidth = res.width //图片原始长宽
						let canvasHeight = res.height
						let img = new Image()
						img.src = res.path
						let canvas = document.createElement('canvas');
						let ctx = canvas.getContext('2d')
						canvas.width = canvasWidth / 2
						canvas.height = canvasHeight / 2
						ctx.drawImage(img, 0, 0, canvasWidth / 2, canvasHeight / 2)

						canvas.toBlob(function(fileSrc) {
							// let imgSrc = window.URL.createObjectURL(fileSrc)   
							console.log('压缩后', fileSrc)
							_this.photo = fileSrc

						})
					}
				})
			},

			// 维修提交
			maintenanceFun() {
				uni.showLoading({
					title: '处理中'
				})

				this.deviceIds = new Array();
				this.repArr.forEach((item, index) => {
					if (item.state) {
						this.deviceIds.push(item.deviceId)
					}
				})
				const dt = new Date()
				const hh = (dt.getHours() + '').padStart(2, '0')
				const mm = (dt.getMinutes() + '').padStart(2, '0')
				const ss = (dt.getSeconds() + '').padStart(2, '0')
				var time = ` ${hh}:${mm}:${ss}`
				var testTime = this.$date.concat(time)
				let base64 = {
					dataURL: this.photo, //用url方式表示的base64图片数据
					type: 'image/jpeg' //文件类型
				}


				if (this.deviceIds.length < 0 || this.repairDesc == '') {
					uni.showToast({
						title: "请填写完整信息",
						icon: "none"
					})
					return;
				}
				if (this.classId) {
					if (!this.imgShow) {
						this.$api.maintenance.createClassRepair(this.classId, this.repairBy, this.deviceIds, this
							.repairDesc, 0, this.isDuty, this.userName).then(res => {
							setTimeout(function() {
								uni.hideLoading();
							}, 2000);
							uni.showToast({
								title: "操作成功"
							})
							var _this = this
							var classId = _this.classId
							var className = _this.topName
							uni.navigateTo({
								url: `/pages_main/dutyCheckWorkAttendance/dutyMaintenanceList`,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						})
					} else {
						uni.uploadFile({
							url: uni.url + "ClassRepair/createClassRepairUpload",
							name: 'file',
							filePath: this.imgShow,
							formData: {
								classId: this.classId,
								deviceIds: this.deviceIds,
								repairDesc: this.repairDesc,
								status: 0,
								createBy: this.repairBy,
								isDuty: this.isDuty
							},
							success: res => {
								setTimeout(function() {
									uni.hideLoading();
								}, 2000);

								uni.showToast({
									title: "操作成功"
								})
								var _this = this
								var classId = _this.classId
								var className = _this.topName
								uni.navigateTo({
									url: `/pages_main/dutyCheckWorkAttendance/dutyMaintenanceList`,
									success: res => {},
									fail: () => {},
									complete: () => {}
								});


							}
						})
					}


				} else {

					if (!this.imgShow) {
						this.$api.maintenance.createRepair(this.dormitoryId, this.deviceIds, this.repairDesc,
							0, this.repairBy, this.isDuty, this.userName).then(res => {
							setTimeout(function() {
								uni.hideLoading();
							}, 2000);
							if (res.data.code == 200) {
								uni.showToast({
									title: "操作成功"
								})
							}
							uni.navigateTo({
								url: `/pages_main/dutyCheckWorkAttendance/dutyMaintenanceList`,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						})

					} else {
						// form.append("upload", res);
						// 		form.append("bdormitoryId", this.dormitoryId, );
						// 		form.append("deviceIds", this.deviceIds);
						// 		form.append("repairDesc", this.repairDesc);
						// 		// repairBy
						// 		form.append("repairBy", this.repairBy);
						// 		form.append("status", 0);
						// 		form.append("isDuty", this.isDuty)
						// 		this.$http.post("Repair/createRepairUpload", form)
						uni.uploadFile({
							url: uni.url + "Repair/createRepairUpload",
							name: 'upload',
							filePath: this.imgShow,
							formData: {
								bdormitoryId: this.dormitoryId,
								deviceIds: this.deviceIds,
								repairDesc: this.repairDesc,
								status: 0,
								repairBy: this.repairBy,
								isDuty: this.isDuty
							},
							success: res => {
								setTimeout(function() {
									uni.hideLoading();
								}, 2000);
								if (res.data.code == 200) {
									uni.showToast({
										title: "操作成功"
									})
								}
								uni.navigateTo({
									url: `/pages_main/dutyCheckWorkAttendance/dutyMaintenanceList`,
									success: res => {},
									fail: () => {},
									complete: () => {}
								});
							}
						})
					}


					// imageConversion.compressAccurately(img, 500).then(res => {
					// 	uni.showLoading({
					// 		title: '图片上传中',
					// 		mask: true
					// 	});
					// 	res = new File([res], img.name, {
					// 		type: res.type,
					// 		lastModified: Date.now()
					// 	})

					// 	// var {data : res} =   this.$http({
					// 	//   method: "post",
					// 	//   url: 'Repair/createRepairUpload',
					// 	//   headers: {
					// 	//     "Content-Type": "multipart/form-data",
					// 	//   },
					// 	//   data: form,

					// 	// })


					// 	if (!this.imgShow) {
					// 		this.$api.maintenance.createRepair(this.dormitoryId, this.deviceIds, this.repairDesc,
					// 			0, this.repairBy, this.isDuty, this.userName).then(res => {
					// 			setTimeout(function() {
					// 				uni.hideLoading();
					// 			}, 2000);
					// 			if (res.data.code == 200) {
					// 				uni.showToast({
					// 					title: "操作成功"
					// 				})
					// 			}
					// 			uni.navigateTo({
					// 				url: `/pages/dutyCheckWorkAttendance/dutyMaintenanceList`,
					// 				success: res => {},
					// 				fail: () => {},
					// 				complete: () => {}
					// 			});
					// 		})
					// 		// this.$http.post('Repair/createRepair',form).then(res=>{
					// 		//  setTimeout(function () {
					// 		//  	uni.hideLoading();
					// 		//  }, 2000);
					// 		//  uni.navigateTo({
					// 		//  	url: `/pages/maintenance/maintenanceStatus?dormitoryId=${this.dormitoryId}&dormitoryNo=${this.dormitoryNo}&buildingNo=${this.buildingNo}&type=${this.topType}`,
					// 		//  	success: res => {},
					// 		//  	fail: () => {},
					// 		//  	complete: () => {}
					// 		//  });
					// 		// })
					// 	} else {
					// 		var form = new FormData();
					// 		form.append("upload", res);
					// 		form.append("bdormitoryId", this.dormitoryId, );
					// 		form.append("deviceIds", this.deviceIds);
					// 		form.append("repairDesc", this.repairDesc);
					// 		// repairBy
					// 		form.append("repairBy", this.repairBy);
					// 		form.append("status", 0);
					// 		form.append("isDuty", this.isDuty)
					// 		this.$http.post("Repair/createRepairUpload", form).then(res => {
					// 			setTimeout(function() {
					// 				uni.hideLoading();
					// 			}, 2000);
					// 			if (res.data.code == 200) {
					// 				uni.showToast({
					// 					title: "操作成功"
					// 				})
					// 			}
					// 			uni.navigateTo({
					// 				url: `/pages/dutyCheckWorkAttendance/dutyMaintenanceList`,
					// 				success: res => {},
					// 				fail: () => {},
					// 				complete: () => {}
					// 			});
					// 		})
					// 	}

					// })





					// Repair/createRepairUpload
					// const data = this.$qs.stringify({
					//        upload:this.photo,
					//        bdormitoryId: this.dormitoryId,
					// 	   deviceIds:this.deviceIds,
					// 	   repairDesc:this.repairDesc,
					// 	   status:0
					//      });	
				}


			},
			// 维修设备
			getAppDevice() {
				this.$api.teacher.getAppDevice().then(res => {
					this.repArr = res.data
					this.repArr.forEach((item, index) => {
						item.state = false
					})

				})
			},
			getAppClassDevice() {
				this.$api.teacher.getAppClassDevice().then(res => {
					this.repArr = res.data
					this.repArr.forEach((item, index) => {
						item.state = false
					})
				})
			},
			chooseImage() {

				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async res => {

						this.imgShow = res.tempFilePaths[0]; //500kb
						this.file = await imageConversion.compressAccurately(res.tempFiles[0], 500)

					}

				})
			}

		},
		components: {
			topCom,
			bottomCom,
			headTitle
		},
	}
</script>

<style>
	.dorItem {
		width: 186rpx;
		height: 30rpx;
		/* padding-left:10rpx; */
		padding-top: 20rpx;
		text-align: center;
	}

	.dorList {
		width: 183rpx;
		height: 265rpx;
		background-color: white;
		position: absolute;
		top: 230rpx;
		left: 455rpx;
		border-radius: 10rpx;
		border: 1rpx solid #888;
		z-index: 9999;
		overflow: auto;
	}

	.titleInput {
		border: #C0C0C0 solid 1rpx;
		border-radius: 10rpx;
		width: 146rpx;
		height: 50rpx;
		color: #999999;
		padding-top: 5rpx;
		margin-left: 18rpx;
		line-height: 50rpx;
		/* text-align:  center; */
	}

	.schoolTitle {
		width: 660rpx;
		display: flex;
		justify-content: space-around;
		align-content: space-around;
		color: #999999;
		font-size: 28rpx;
		margin-left: 30rpx;
	}

	.indexContent {
		font-size: 36rpx;
	}

	.imgSty {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 600rpx;
		height: 300upx;
		margin-left: 50rpx;
		margin-top: 30rpx;
		padding: 10upx;
		/* margin-left:90rpx; */
		margin-top: 0rpx
	}

	.repText {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 600rpx;
		height: 150upx;
		margin-left: 50rpx;
		margin-top: 30rpx;
		padding: 10upx;
	}

	.repCheckout {
		display: flex;
		/* justify-content: space-between; */
		align-content: center;
		flex-wrap: wrap;
		font-size: 36rpx;
		color: #808080;
		margin-top: 30upx;
		width: 100%;

		/* margin-left:50upx; */
	}

	.repDevice {
		text-align: left;
		font-size: 42rpx;
		color: #808080;
		padding-left: 50upx;
	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 38rpx;
		color: blue;
		width: 100%;
		padding: 50upx
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		width: 190upx;
		height: 60upx;
		color: white;
		font-size: 26upx;
		font-weight: 0;
	}

	.leaveLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: 0upx;
		left: -30upx;
	}

	.leaveMgm {
		color: #808080;
		font-size: 38rpx;
	}

	.leaveCheck {
		margin-left: 60upx;
		margin-bottom: 30upx;
		width: 160rpx;
	}
</style>